<template>
	<div id="goods_search">
		<!-- 顶部搜索组件 -->
		<div class="sousuo" :style="`background-color:${bgcolorA};`">
			<div class="logo">
				<img v-if="!classle" src="@/assets/logo.png" alt="" v-show="showle">
				<span v-else class="iconfont" :class="classle" @click="$router.go(-1)"
					:style="`color:${color};`"></span>
			</div>
			<div class="input">
				<span class="iconfont icon-31sousuo"></span>
				<input type="text" :placeholder="title" @click="pushsousuo ? push_on() : ''"
					:style="`background-color:${bgcolorB};`" v-model="Text">
			</div>
			<div class="icon">
				<span v-if="!classri" class="iconfont" :class="classri" @click="$router.push(push)"
					:style="`color:${color};`"></span>
				<span class="text" v-else :style="`color:${color};`" @click="change(Text)">{{ textri }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Text: ""
			}
		},
		props: {
			Texts: {
				typeof: String,
				default: ""
			},
			// 搜索框是否能跳转
			pushsousuo: {
				typeof: Boolean,
				default: false
			},
			// 搜索框文字
			model: {
				typeof: String,
				default: ""
			},
			// 搜索框默认文字
			title: {
				typeof: String,
				default: "点击搜索商品"
			},
			// 右侧文字
			textri: {
				typeof: String,
				default: ""
			},
			// 字体图标颜色
			color: {
				typeof: String,
				default: ""
			},
			// 搜索背景颜色
			bgcolorA: {
				typeof: String,
				default: ""
			},
			// input背景颜色
			bgcolorB: {
				typeof: String,
				default: ""
			},
			// 左图显示
			showle: {
				typeof: Boolean,
				default: false
			},
			// 左侧图标 类
			classle: {
				typeof: String,
				default: ""
			},
			// 右侧图标 类
			classri: {
				typeof: String,
				default: "icon-xiaoxi"
			},
			// 右侧图标跳转
			push: {
				typeof: String,
				default: "/home/goods_search"
			},
		},
		methods: {
			push_on() {
				this.$router.push('/home/goods_search')
			},
			change(index) {
				if (index != "") {
					this.$emit('search', index)
				}
			}
		},
		watch: {
			Texts(newl) {
				this.Text = newl
				console.log(this.Text)
				console.log(newl)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width:(100vw / 375);

	#goods_search {
		width: 100vw;
		position: fixed;
		top: 0;
		// 顶部搜索

		.sousuo {
			width: 100%;
			height: 50 * $width;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 * $width 10 * $width 0;

			.iconfont {
				font-size: 24 * $width;
			}

			.text {
				margin-left: 5 * $width;
				font-size: 15 * $width;
			}

			.logo {
				img {
					width: 22 * $width;
				}
			}

			.input {
				flex: 1;
				// width: 270 * $width;
				height: 32 * $width;
				margin: 0 5 * $width;
				position: relative;

				input {
					width: 100%;
					height: 100%;
					border-radius: 16 * $width;
					border: none;
					background-color: #ededed;
					padding-left: 33 * $width;
				}

				span {
					position: absolute;
					top: 5 * $width;
					left: 13 * $width;
					font-size: 16 * $width;
				}
			}
		}
	}
</style>
